<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">添加账单</block>
		</cu-custom>
		<van-tabs :active="active" animated color='#FDD692' @click="onClick">
			<van-tab title="支出" class="output">
				<view class="content">
					<view class="detail"  @click="choose(0)">
						<view :class=" ['image', {'clickone': 0===activeone}]">
							<van-icon name="shopping-cart-o" size='50rpx' />
						</view>
						<view class="text">购物</view>
					</view>
					<view class="detail" @click="choose(1)">
						<view :class=" ['image', {'clickone': 1===activeone}]">
							<van-icon name="friends-o" size='50rpx' />
						</view>
						<view class="text">社交</view>
					</view>
					<view class="detail" @click="choose(2)">
						<view :class=" ['image', {'clickone': 2===activeone}]">
							<van-icon name="wap-home-o" size='50rpx' />
						</view>
						<view class="text">医疗</view>
					</view>
					<view class="detail"  @click="choose(3)">
						<view :class=" ['image', {'clickone': 3===activeone}]">
							<van-icon name="flower-o" size='50rpx' />
						</view>
						<view class="text">教育</view>
					</view>
					<view class="detail"  @click="choose(4)">
						<view :class=" ['image', {'clickone': 4===activeone}]">
							<van-icon name="setting-o" size='50rpx' />
						</view>
						<view class="text">其他</view>
					</view>
				</view>
				<calculator :attribute=0></calculator>
			</van-tab>
			<van-tab title="收入" class="input">
				<view class="content">
					<view class="detail"  @click="choose(5)">
						<view :class=" ['image', {'clickone': 5===activeone}]">
							<van-icon name="balance-o" size='50rpx' />
						</view>
						<view class="text">工资</view>
					</view>
					<view class="detail" @click="choose(6)">
						<view :class=" ['image', {'clickone': 6===activeone}]">
							<van-icon name="clock-o" size='50rpx' />
						</view>
						<view class="text">兼职</view>
					</view>
					<view class="detail" @click="choose(7)">
						<view :class=" ['image', {'clickone': 7===activeone}]">
							<van-icon name="refund-o" size='50rpx' />
						</view>
						<view class="text">理财</view>
					</view>
					<view class="detail"  @click="choose(8)">
						<view :class=" ['image', {'clickone': 8===activeone}]">
							<van-icon name="gift-card-o" size='50rpx' />
						</view>
						<view class="text">礼金</view>
					</view>
					<view class="detail"  @click="choose(9)">
						<view :class=" ['image', {'clickone': 9===activeone}]">
							<van-icon name="setting-o" size='50rpx' />
						</view>
						<view class="text">其他</view>
					</view>
				</view>
				<calculator :attribute=1></calculator>
			</van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeone: 0,
				active:0
			};
		},
		methods: {
			choose(id) {
				this.activeone = id
				 uni.$emit('mychoose', { data: this.activeone });
			},
			onClick(e){
				this.active=e.detail.index
				if(this.active==0) this.activeone=0
				else this.activeone=5
				 uni.$emit('mychoose', { data: this.activeone });
			}
		}
	}
</script>

<style lang="less">
	.output,
	.input{
		.content {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			border: 1rpx solid #eee;

			.detail {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				border-right: 1rpx solid #eee;
				padding: 13rpx 41rpx;

				.text {
					margin-top: 5rpx;
					margin-left: 5rpx;
				}
			}

			.detail:last-child {
				border-right: none;
			}

			.image {
				height: 70rpx;
				width: 70rpx;
				display: flex;
				justify-content: center;
				/* 水平居中对齐 */
				align-items: center;
				/* 垂直居中对齐 */
				background-color: #F0E5DE;
				border-radius: 50%;
			}

			.clickone {
				background-color: #FDD692;
			}
		}


	}
</style>